<template>
  <div class="mod-sys__user">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model="state.dataForm.username" placeholder="用户名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <ren-select v-model="state.dataForm.gender" dict-type="gender" placeholder="性别"></ren-select>
      </el-form-item>
      <el-form-item>
        <ren-dept-tree v-model="state.dataForm.deptId" placeholder="选择部门" :query="true"></ren-dept-tree>
      </el-form-item>
      <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('sys:user:save')" type="primary"
                   @click="addOrUpdateHandle()">新增
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('sys:user:delete')" type="danger"
                   @click="state.deleteHandle()">删除
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('sys:user:export')" type="info"
                   @click="state.exportHandle()">导出
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="DownloadTemplate()">模板下载</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload
          style="margin-top: 5px;"
          accept=".xlsx"
          :action="action"
          :data="{file:'xlsx'}"
          :auto-upload="true"
          :on-success="success"
          :show-file-list="false"
          :on-error="error"

          :headers="uploadHeaders"
        >
          <el-button type="warning">导入</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border
              @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle"
              style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="username" label="用户名" sortable="custom" header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="deptName" label="所属部门" header-align="center" align="center"></el-table-column>
      <el-table-column prop="email" label="邮箱" header-align="center" align="center"></el-table-column>
      <el-table-column prop="mobile" label="手机号" sortable="custom" header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="gender" label="性别" sortable="custom" header-align="center" align="center">
        <template v-slot="scope">
          {{ state.getDictLabel("gender", scope.row.gender) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" sortable="custom" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status === 0" size="small" type="danger">停用</el-tag>
          <el-tag v-else size="small" type="success">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updateDate" label="更新时间" sortable="custom" header-align="center" align="center"
                       width="180"></el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('sys:user:update')" type="primary" link
                     @click="addOrUpdateHandle(scope.row.id)">修改
          </el-button>
          <el-button v-if="state.hasPermission('sys:user:delete')" type="primary" link
                     @click="state.deleteHandle(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
                   :total="state.total" layout="total, sizes, prev, pager, next, jumper"
                   @size-change="state.pageSizeChangeHandle"
                   @current-change="state.pageCurrentChangeHandle"></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, onMounted } from "vue";
import AddOrUpdate from "./user-add-or-update.vue";
// 获取token
import { getToken } from "@/utils/cache";
import { ElMessage } from "element-plus";


const view = reactive({
  getDataListURL: "/sys/user/page",
  getDataListIsPage: true,
  deleteURL: "/sys/user",
  deleteIsBatch: true,
  exportURL: "/sys/user/export",
  dataForm: {
    username: "",
    deptId: "",
    postId: "",
    gender: ""
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });
console.log('state',state)
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};
  const DownloadTemplate = () => {
    // 模板下载链接
    const templateURL = "http://web-liutalis.oss-cn-beijing.aliyuncs.com/49943386-860d-43fd-82b8-452e1511e208.xlsx";
  // 打开链接进行下载
  const xhr = new XMLHttpRequest();
  xhr.open("GET", templateURL, true);
  xhr.responseType = "blob"; // 以二进制流方式处理数据（blob）

  xhr.onload = function() {
    const blob = xhr.response;
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.style.display = "none";
    a.href = url;
    a.download = "用户管理模版.xlsx"; // 下载后文件名
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
  };

  xhr.send();
};

const apiBase = import.meta.env.VITE_APP_API; // 获取环境变量中的API地址
const action = `${apiBase}/sys/user/importUser`;
// 从 tokenData 中提取 token
const token = getToken();
console.log("这是token", token);
const uploadHeaders = {
  'Token': token // 假设你的后端使用 Bearer Token 进行身份验证
};
const success = (response: any, file: any, fileList: any) => {
  // 处理上传成功的逻辑，例如提示用户上传成功或者刷新数据列表等
  if(response.msg=='数据库中已存在该记录'){
  ElMessage.warning('数据库中已存在该记录');
  }else if(response.data=='导入失败'){
    ElMessage.error(response.data);
  }else{
    ElMessage.success(response.data);
    console.log("文件上传成功", response);
    //刷新列表
    state.getDataList();
  }
};
const error = (err: any, file: any, fileList: any) => {
  ElMessage.error(err.data);
  console.error("文件上传失败", err);
  // ElMessage.error('文件上传失败，请重试！');
};
</script>
